<script setup lang="ts">
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'
import type { VChartInstance } from '@/types'
import VueEcharts from 'vue-echarts'

const props = defineProps<{
  data: any
}>()

const designStore = useDesignStore()

const option = computed(() => {
  let s = props.data[0].length - 1
  s = s < 0 ? 0 : s
  return {
    legend: {
      top: 20,
      right: 20,
      type: 'scroll',
    },
    grid: {
      left: 40,
      right: 40,
      top: 50,
      bottom: 30,
      containLabel: true,
    },
    tooltip: {
      // trigger: 'axis',
      trigger: 'item',
    },
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: [
      ...Array(s).fill({ type: 'bar', stack: 'total', emphasis: { focus: 'series' } }),
    ],
    dataset: {
      source: [
        ...props.data,
      ],
    },
  }
})

const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <VueEcharts ref="chartRef" :option="option" :theme="designStore.theme" />
</template>
